<template>
  <div class="app-container">
    <div class="page">
      <div class="gva-card-box">
        <div class="gva-card gva-top-card">
          <div class="gva-top-card-left">
            <div class="gva-top-card-left-title">早安，管理员，请开始一天的工作吧</div>
            <div class="gva-top-card-left-rows">
              <el-row :gutter="32">
                <el-col :span="10" style="max-width: 100%; margin-bottom: 1em;">
                  <el-card shadow="always">
                    <div class="flex-center">
                      <el-icon class="dashboard-icon"><avatar /></el-icon>
<!--                      <el-badge :value="todayCheckinCount" class="item">-->
<!--                        <el-button>今日打卡人数</el-button>-->
<!--                      </el-badge>-->
                      <span :v-text="todayCheckinCount">今日打卡人数</span>
                      <el-badge :max="999999999" :value="todayCheckinCount" class="num-box"></el-badge>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8" style="max-width: 100%; margin-bottom: 1em;">
                  <el-card shadow="hover">
                    <div class="flex-center">
                      <el-icon class="dashboard-icon"><avatar /></el-icon>
                      <span :v-text="userCount">注册用户数</span>
                      <el-badge :max="999999999" :value="userCount" class="num-box" type="primary"></el-badge>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8" style="max-width: 100%; margin-bottom: 1em;">
                  <el-card shadow="never">
                    <div class="flex-center">
                      <el-icon class="dashboard-icon"><avatar /></el-icon>
                      <span :v-text="bindUserCount">手环绑定数</span>
                      <el-badge :max="999999999" :value="bindUserCount" class="num-box" type="primary"></el-badge>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8" style="max-width: 100%; margin-bottom: 1em;">
                  <el-card shadow="never">
                    <div class="flex-center">
                      <el-icon class="dashboard-icon"><avatar /></el-icon>
                      <span :v-text="noDataUser">绑定手环后连续3天无数据的用户数</span>
                      <el-badge :max="999999999" :value="noDataUser" class="num-box"></el-badge>
                    </div>
                  </el-card>
                </el-col>
              </el-row>


            </div>
            <div>

            </div>
          </div>
          <img src="@/assets/images/dashboard.png" class="gva-top-card-right" alt>
        </div>
      </div>

      <div class="gva-card-box">
        <div class="gva-card">
          <div class="card-header">
            <span>数据统计</span>
          </div>
          <div class="echart-box">
            <el-row :gutter="20">
              <el-col>
                <div class="dashboard-line-box">
                  <div class="dashboard-line-title">
                    打卡用户
                  </div>
                  <div ref="echart" class="dashboard-line" />
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- <script setup name="Index">
const version = ref('3.8.2')

function goTarget(url) {
  window.open(url, '__blank')
}
</script> -->

<script setup>
import * as echarts from 'echarts'
import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue'
import { getIndex } from "@/api/system/index";
// import 'echarts/theme/macarons'

const todayCheckinCount = ref(0);
const userCount = ref(0);
const bindUserCount = ref(0);
const noDataUser = ref(0);
var dataAxis = [];
var data = [];

getIndex().then(response => {
  todayCheckinCount.value = response.data.todayCheckinCount;
  userCount.value = response.data.userCount;
  bindUserCount.value = response.data.bindUserCount;
  noDataUser.value = response.data.noDataUser;
  dataAxis = response.data.dayList;
  data = response.data.countList;
  setOptions()
})


// var yMax = 500
// var dataShadow = []

// // eslint-disable-next-line no-redeclare
// for (var i = 0; i < data.length; i++) {
//   dataShadow.push(yMax)
// }

const chart = shallowRef(null)
const echart = ref(null)
const initChart = () => {
  chart.value = echarts.init(echart.value, /*'macarons'*/)
  setOptions()
}
const setOptions = () => {
  chart.value.setOption({
    grid: {
      left: '40',
      right: '20',
      top: '40',
      bottom: '20',
    },
    xAxis: {
      data: dataAxis,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      z: 10,
    },
    yAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
      name: '打卡人数',
      axisLabel: {
        textStyle: {
          color: '#999',
        },
      },
    },
    dataZoom: [
      {
        type: 'inside',
      },
    ],
    series: [
      {
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          normal: {
            //配置柱状图颜色
              color: '#188df0',
              borderRadius: [5, 5, 0, 0],
              label: {
              //添加数值显示不需要可以删除
                show: true, //开启显示

                textStyle: {
                  //数值样式
                  color: "#f6f6f6",
                  fontSize: 12,
                },
              },
            },

        },
        emphasis: {
          itemStyle: {
            color: '#188df0',
          },
        },
        data: data,
      },
    ],
  })
}

onMounted(async () => {
  await nextTick()
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})
</script>


<style lang="scss" scoped>
@mixin flex-center {
  display: flex;
  align-items: center;
}

.page {
  background: #f0f2f5;
  padding: 0;

  .gva-card-box {
    padding: 12px 16px;

    &+.gva-card-box {
      padding-top: 0px;
    }
  }

  .gva-card {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 2px;
    height: auto;
    padding: 26px 30px;
    overflow: hidden;
    box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
  }

  .gva-top-card {
    height: 420px;
    @include flex-center;
    justify-content: space-between;
    color: #777;

    &-left {
      height: 100%;
      width: 77%;
      display: flex;
      flex-direction: column;

      &-title {
        font-size: 22px;
        color: #343844;
      }

      &-dot {
        font-size: 16px;
        color: #6B7687;
        margin-top: 24px;
      }

      &-rows {
        // margin-top: 15px;
        margin-top: 18px;
        color: #6B7687;
        width: 100%;
        align-items: center;
      }

      &-item {
        +.gva-top-card-left-item {
          margin-top: 24px;
        }

        margin-top: 14px;
      }
    }

    &-right {
      height: 600px;
      width: 23%;
      margin-top: 28px;
    }
  }

  ::v-deep(.el-card__header) {
    padding: 0;
    border-bottom: none;
  }

  .card-header {
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
  }

  .quick-entrance-title {
    height: 30px;
    font-size: 22px;
    color: #333;
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .quick-entrance-items {
    @include flex-center;
    justify-content: center;
    text-align: center;
    color: #333;

    .quick-entrance-item {
      padding: 16px 28px;
      margin-top: -16px;
      margin-bottom: -16px;
      border-radius: 4px;
      transition: all 0.2s;

      &:hover {
        box-shadow: 0px 0px 7px 0px rgba(217, 217, 217, 0.55);
      }

      cursor: pointer;
      height: auto;
      text-align: center;

      // align-items: center;
      &-icon {
        width: 50px;
        height: 50px !important;
        border-radius: 8px;
        @include flex-center;
        justify-content: center;
        margin: 0 auto;

        i {
          font-size: 24px;
        }
      }

      p {
        margin-top: 10px;
      }
    }
  }

  .echart-box {
    padding: 14px;
  }
}

.dashboard-icon {
  font-size: 20px;
  color: rgb(85, 160, 248);
  width: 30px;
  height: 30px;
  margin-right: 10px;
  @include flex-center;
}

.flex-center {
  @include flex-center;
}

//小屏幕不显示右侧，将登录框居中
@media (max-width: 750px) {
  .gva-top-card-left-rows .el-row {
    display: block !important;
  }
  .gva-card {
    padding: 20px 10px !important;

    .gva-top-card {
      height: auto;

      &-left {
        &-title {
          font-size: 20px !important;
        }

        &-rows {
          margin-top: 15px;
          align-items: center;
        }
      }

      &-right {
        display: none;
      }
    }

    .gva-middle-card {
      &-item {
        line-height: 20px;
      }
    }

    .dashboard-icon {
      font-size: 18px;
    }
  }
}
</style>

<style lang="scss" scoped>
.dashboard-line-box {
  .dashboard-line {
    background-color: #fff;
    height: 360px;
    width: 100%;
  }

  .dashboard-line-title {
    font-weight: 600;
    margin-bottom: 12px;
  }
}
</style>